<template>
    <div id="role">
        角色管理
   <el-card class="box-card">
   <!-- 菜单导航栏 -->
   <div class="tabBox">
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @selection-change="handleSelect"
    router
  >
    <el-menu-item index="/manager">管理用户列表</el-menu-item>
    <el-menu-item index="/role">角色列表</el-menu-item>
  </el-menu>
  <span> <el-button type="success" @click="goAddRole">添加角色</el-button></span>
  </div>
  <!-- 表格 -->
<el-table
    ref="multipleTableRef"
    :data="roletableData"
    style="width: 100%"
    @select="CdjcheckBox"
  >  
  <!-- @selection-change="handleSelectionChange" -->
    <el-table-column type="selection"/>
    <el-table-column label="角色名称" property="rname" show-overflow-tooltip></el-table-column>
    <el-table-column property="descri" label="角色描述" width="300"   show-overflow-tooltip/>
    <el-table-column property="type" label="角色类型" show-overflow-tooltip />
     <el-table-column label="操作" show-overflow-tooltip  width="350">
      <template #default="scope">
         <el-button type="primary" size="small" @click="updataRoleBtn(scope.row)">编辑</el-button>
         <el-button type="success" size="small" @click="getfproleList(scope.row)">分配用户</el-button>
         <el-button type="danger" size="small" @click="delroleLists(scope.row)">删除</el-button>
      </template >
     </el-table-column>
  </el-table>
  <!-- 修改 -->
   <el-dialog
    v-model="updateIsok"
    :before-close="handleClose"
  >
  <el-form label-width="auto"  :model="updateroleList" ref="updateroleRef"  class="updForm">
      <el-form-item  >
    </el-form-item>
    <el-form-item prop="rname" >
      <text>角色名称:</text>
      <el-input v-model="updateroleList.rname"  type="text"  placeholder="请输入角色名称" class="phoneInput" />
    </el-form-item>
     <el-form-item  prop="descri">
      <text>角色描述:</text>
      <el-input v-model="updateroleList.descri"  type="text"  placeholder="请输入角色描述" />
    </el-form-item>
    <el-form-item  prop="type">
      <text>角色类型:</text>
      <el-select v-model="updateroleList.type"  placeholder="请选择" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    </el-form-item>
    <el-form-item>
      <text>角色权限:</text>
      <el-tree :data="rolexgqxList" :props="roleTree" show-checkbox node-key="id" @check="currentCheck" accordion= true  :default-expanded-keys= treefIds
    :default-checked-keys= treecIds />
    </el-form-item>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="roleUptqxisOk">取消</el-button>
        <el-button type="primary" @click="updeteroleBtn"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 分配用户 -->

  <el-dialog
    v-model="assignRolesIsok"
    @close="gbdialog"
    class="fpyuBox"
  >
  <el-form label-width="auto"  :model="assignRoleslistId" ref="assignRolesRef"  class="fpupdForm" >
      <el-form-item  >
    </el-form-item>
    <el-form-item prop="rname" >
      <text>角色名称:</text>
      <el-input v-model="assignRoleslistId.rname"  type="text" disabled= true  placeholder="请输入角色名称" class="phoneInput" />
    </el-form-item>
    <el-form-item >
      <text>管理角色:</text>
      <el-tree-select
      placeholder="请选择"
    v-model="allCheckName"
    :data="assignRoleduixiang"
    multiple
    :render-after-expand="false"
    show-checkbox
    check-strictly
    check-on-click-node
    @node-click="addSelect"
  />
    </el-form-item>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="qxassignRoles">取消</el-button>
        <el-button type="primary" @click="qrassignRoles"
          >确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 批量删除-->
<div class="alldeleBox" @click="pldele"><h5>批量删除</h5></div>
<!-- 分页器 -->
  <div class="demo-pagination-block">
      <el-pagination background layout="prev, pager, next" :total='6' v-model:page-size="pageSize"  v-model:currentPage="roleCurrentPage"  @current-change="handleCurrentChange"/>
  </div>
  </el-card>
    </div>
</template>

<script>
import {toRefs } from 'vue'
import { ElCard } from 'element-plus'
import { useCounterStore } from "../store";
export default {
    components:{
        ElCard
    },
    setup() {
        const store = useCounterStore()
        //关闭分配用户时触发
        const gbdialog = () =>{
          console.log(6666)
          store.gbdialogs()
        }
        //点检复选框
        const CdjcheckBox = (selection) =>{
           store.CdjcheckBoxs(selection)
        }
        //批量删除
        const pldele = ()=>{
          store.pldeles()
        }
        //
        const addSelect =() =>{
         store.addSelect()
        }
        //分配角色对话框确认按钮
        const qrassignRoles =() =>{
               store.qrassignRoles()
        }
        //分配角色对话框取消按钮
        const qxassignRoles =() =>{
               store.qxassignRoles()
        }
        //点击 分配角色按钮
        const getfproleList =(e) =>{
         store.getfproleList(e)
        }
        //修改对话框确认按钮
        const updeteroleBtn =() =>{
          store.updeteroleBtns()
        }
        //修改对话框取消按钮
        const roleUptqxisOk =() =>{
         store.roleUptqxisOks()
        }
        //修改
        const updataRoleBtn=(e) =>{
     store.updataRoleBtns(e)
        }
        //获取树形控件所选节点数据
         const currentCheck =(nodeObj,SelectedObj) =>{
     store.currentChecks(nodeObj,SelectedObj)
        }
        //用户列表删除
        const delroleLists = (e) =>{
          store.delroleList(e)
        }
        //获取角色列表数据
       const gitroleLists = () =>{
        // console.log(666)
        store.gitroleList()
       } 
//添加角色按钮
   const goAddRole =() =>{
       store.goAddRoles()
   }
        const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
} 
//页码改变时触发
          const handleCurrentChange = (val) =>{
            store.handleCurrentChange(val)
            store.roleCurrentPage=val
            gitroleLists()
          }
        return{
            ...toRefs(store),
            handleSelect,
            handleCurrentChange,
            goAddRole,
            gitroleLists,
            delroleLists,
            currentCheck,
            updataRoleBtn,
            roleUptqxisOk,
            updeteroleBtn,
            getfproleList,
            qxassignRoles,
            qrassignRoles,
            addSelect,
            pldele,
            CdjcheckBox,
            gbdialog
        }
        
    },
     created(){
     this.gitroleLists()
    },
}
</script>
<style lang="less" scoped>
.tabBox{
 
  display: flex;
  justify-content: space-between;
  align-items: center;
}
        .el-menu{
            border-bottom: 0px;
            width: 300px;
            
        }
      .el-menu-item{
        border-bottom: 2px solid #666;
        line-height: 40px;
        margin-left: 0px;
        margin-right: 5px;
      }
    .el-table{
         margin-top: 20px;
         border: 1px solid #666;
        }
        .el-tooltip{
            border: 1px solid red;
        }
        /deep/.el-table th.el-table__cell>.cell{
           text-align: center;
        }
       
        /deep/.el-table td.el-table__cell div{
             text-align: center;
        }
        .el-checkbox{
            border: 1px solid #666;
        }
        .alldeleBox{
            width: 100%;
            border: 0px solid red;
            margin-top: 10px;
            text-align: left;
            cursor: pointer;
        }
        .el-pagination{
            justify-content: center;
        }
        /deep/.el-dialog{
          width: 50%;
        }
        .el-form{
          width: 500px;
          height: 400px;
          border: 0px solid red;
          background: #FFF;
        }
        .el-form-item {
          display: flex;
          margin-top: 20px;
          text{
            width: 100px;
            text-align: right;
            margin-right: 20px;
          }
          .el-input{
            width: 300px;
          }
        }
        .el-form-item:last-child{
border: 0px solid pink;
width: 350px;
margin: 0 auto;
        }
        .updForm{
          position: relative;
          .el-form-item{
            width: 100%;
            border: 0px solid red;
          }
        }
         .fpupdForm{
             height: 200px;
             .el-form-item{
            width: 100%;
            border: 0px solid red;
          }
          } 
        .qxBox{
position: absolute;
bottom: 10px;
left: 15%;
display: flex;
justify-content:space-between;
        }
        .c-xgBtn{
          margin-left: 50%;
        }
        .fpyuBox{
          height: 300px;
           /deep/.el-form{
          width: 500px;
          height: 300px;
          border: 0px solid red;
          background: #FFF;
        }
        }
</style>